<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/mycss.css"/>
		<style type="text/css">
			*{margin:0;padding: 0;}
			
			#top{
				height: 27px;
				background: rgb(238,238,238);
				line-height: 27px;
				font-size: 15px;
				overflow: hidden;
			}
			#top #number{
				font-style: italic;
				font-weight: bolder;
				font-size: 20px;
				color: red;
			} 
			#dianhua{vertical-align: middle;height: 20px;}
			#xiajian{vertical-align: middle;}
			#qq{vertical-align: middle;height: 20px;}
			#logo{
				height: 77px;
				line-height: 77px;
				
			}
			#alogo{ 
				background: url(images/logo.png);
				background-position: 0px -2px;
				width: 421px;
				height: 60px;
				
				vertical-align: middle;
				display: inline-block;
				margin-right: 10px;
			}
			#search{
				display: inline-block;
				height: 75px;
				width: 357px;
				line-height: 40px;
				vertical-align: middle;
				padding-left: 160px;
			}
			#inputbox{
				margin-top: 8px;
				height: 25px;
				width: 275px;
				vertical-align: top;
				border: #666666 2px solid;
			}
			#sumbit{
				margin-top: 8px;
				height: 29px;
				width: 69px;
				display: inline-block;
				vertical-align: top;
				background: #666;
				border:none;
				line-height: 20px;
			}
			#logo #botton{
				width: 126px;
				height: 35px;
				background: url(images/logo.png) 0px -63px;
				border: none;
				position: absolute;
				right: 0px;
				top:20%;
			}
			#menu{
				height: 35px;
				background: rgb(162,31,37);
				line-height: 35px;
			}
			#menu .li1{
				float: left;
			}
			#menu .li1 img{
				
			}
			#menu .li1 span{
				padding-right: 15px;
			}
			#menu .li1:hover{
				background: #686868;
				color: white;
			}
			#nop{
				float: right;
				padding-right: 100px;
			}
			#nopimg{
				position: absolute;
				right: 60px;
				top:35px;
				display: none;
			}
			#nop:hover+#nopimg{
				display: block;
			}
			#nopimg:hover{
				display: block;
			}
			#blist{
				position: absolute;
				top: 35px;
				background: black;
				width:190px;
				color: white;
				display: none;
			}
			#blist li{
				height: 40px;
			}
			#blist li img{
				padding-right: 10px;
			}
			#allp:hover + #blist{
				display: block;
			}
			#blist:hover{
				display: block;
				
			}
			#bigimg{
				width: 1600px;
				height: 385px;
			}
			
		</style>
	</head>
	<body>
		<div id="top">
			<div style="position: absolute; left: 135px;right: 135px;">
			<div style="float: right;height: 27px;">
				<a href="#" style="color: coral;padding-right: 8px;">欢迎登陆名鞋库</a>
				<a href="#" style="color: coral;padding-right: 18px;">免费注册</a>|
				<a href="#" >我的名鞋库</a><img id="xiajian" style="padding-right: 18px" src="images/xiajian.jpg" />|
				<img src="images/iphone.jpg"/><a href="#">手机名鞋库</a>
				<a href="#">收藏名鞋库</a>
				<img id="qq" src="images/qq.jpg" /><a href="#">名鞋库客服</a>
				<img  id="dianhua"  src="images/dianhua.jpg"/><a id="number" href="#">16619784707</a>
			</div>
			</div>
		</div>
		<div id="logo">
			<div style="position: absolute; left: 135px;right: 135px;">
				<div id="alogo"></div>
				<div id="search" >
					<input id="inputbox" type="text" /><input type="submit" id="sumbit" value="搜索"/>
					<p style="line-height: 28px;font-size: 15px;">热搜：<a style="color: #666;padding-left: 6px;" href="#">耐克</a><a style="color: #666;padding-left: 6px;" href="#">耐克</a><a style="color: #666;padding-left: 6px;" href="#">耐克</a><a style="color: #666;padding-left: 6px;" href="#">耐克</a><a style="color: #666;padding-left: 6px;" href="#">耐克</a><a style="color: #666;padding-left: 6px;" href="#">耐克</a><a style="color: #666;padding-left: 6px;" href="#">耐克</a></p>
				</div>
				<button id="botton"><span style="padding-left: 20px;">购物车0件</span></button>
			</div>
		</div>
		<div id="menu">
			<div style="position: absolute; left: 135px;right: 135px;">
				<ul>
					<li class="li1" id="allp" style="width:190px;padding-left: 0px;border-right:1px solid #CCCCCC;text-align: center;"><span >所以商品分类</span></li>
					<div id="blist">
						<ul>
							<li><img src="images/aa_01.jpg">我的滑板鞋</li>
							<li>我的滑板鞋</li>
							<li>我的滑板鞋</li>
							<li>我的滑板鞋</li>
							<li>我的滑板鞋</li>
							<li>我的滑板鞋</li>
							<li>我的滑板鞋</li>
							<li>我的滑板鞋</li>
							<li>我的滑板鞋</li>
							<li>我的滑板鞋</li>
						</ul>
					</div>
					<li class="li1" ><span>所以商品分类</span><img src="images/gang.jpg" /></li>
					<li class="li1" ><span>鞋子</span><img src="images/gang.jpg" /></li>
					<li class="li1" ><span>衣服</span><img src="images/gang.jpg" /></li>
					<li class="li1" ><span>手枪</span><img src="images/gang.jpg" /></li>
					<li class="li1" ><span>女友</span><img src="images/gang.jpg" /></li>
					<li class="li1" ><span>男友</span><img src="images/gang.jpg" /></li>
					<li class="li1" ><span>苹果</span><img src="images/gang.jpg" /></li>
					<li class="li1" ><span>压力</span><img src="images/gang.jpg" /></li>	
				</ul>
				<span id="nop"><a href="#">即将售罄</a></span>
				<img id="nopimg" src="images/right.jpg" />
			</div>
		</div>
		<div id="bigimg" style="background:url(images/datu.jpg);">
			<div style="position: absolute; left: 135px;right: 135px;">
				<div>
					
				</div>
			</div>
		</div>
		
	</body>
</html>